<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<html >
<head>
    <meta charset="UTF-8">
    <title>Settings - Online Judge</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" th:href="@{/css/styles.css}" >
    <script th:src="@{/js/jquery-1.7.2.js}"></script>
    <script th:src="@{/js/gdoj.js}"></script>
</head>
<body>
<div th:replace="common::web-navbar"></div>
<div class="container">
    <div class="content">
        <div class="content-with-sidebar"> 	 <!-- class="content-with-sidebar" -->
            <div id="nav-content" >
                <a th:href="@{/profile/{username}(username=${user.username})}"th:text="${user.username}" ></a>
                <a th:href="@{/settings}" th:if="${session.session_username}" class="current" >[[#{settings}]]</a>
                <a th:href="@{/problemset/status/{username}(username=${user.username})} + '/page/1'" target="blank">[[#{mysubmission}]]</a>
                <a th:href="@{/contests/{username}(username=${user.username})}" target="blank">[[#{mycontest}]]</a>
            </div>
            <div class="profile roundbox">
                <div class="profile-box-avatar-setting">
                    <div style="position: relative;">
                        <img class="big-avatar" th:alt="${user.username}" th:src="${user.avatar}" />
                        <a id="photo-change" class="photo-change">[[#{profile.change_photo}]]</a>
                    </div>
                    <div id="profile-box-avatar-change" class="profile-box-avatar-change">
                        <div class="avatar-list">
                        </div>
                        <div class="profile-box-avatar-select-upload">
                            <a class="photo profile-box-avatar-upload" >
                                [[#{profile.upload_photo}]]
                            </a>
                            <a class="profile-box-avatar-upload-cancel">
                                Cancel
                            </a>
                        </div>
                    </div>
                </div>
                <div id="modifyuser">
                    <form action="" method="post" theme="simple">
                        <input type="hidden" name="submited" value="true">
                        <div class="profile-setting-form-box">
                            <div class="pretty-edit-box">
                                <div class="pretty-edit-box-title">[[#{profile.email}]]</div>
                                <input class="pretty-edit-box-text" id="email" name="email" readonly="readonly" th:value="${user.email}">
                            </div>
                            <div class="pretty-edit-box">
                                <div class="pretty-edit-box-title">
                                    <div class="pretty-edit-box-name">[[#{profile.nickname}]]</div>
                                    <div class="pretty-edit-box-tip"><span class="takeTip">0</span>/30</div>
                                </div>
                                <input class="pretty-edit-box-text" id="nickname" name="nickname" maxlength="30" th:if="${user.nickname == null || user.nickname.length == 0}" th:value="${user.username}">
                                <input class="pretty-edit-box-text" id="nickname" name="nickname" maxlength="30" th:if="${user.nickname != null && user.nickname.length != 0}" th:value="${user.nickname}">
                            </div>
                            <div class="pretty-edit-box">
                                <div class="pretty-edit-box-title">
                                    <div class="pretty-edit-box-name">[[#{profile.motto}]]</div>
                                    <div class="pretty-edit-box-tip"><span class="takeTip">0</span>/160</div>
                                </div>
                                <textarea class="profile-motto-input pretty-edit-box-text small-scrollbar" id="motto" name="motto" maxlength="160" th:utext="${user.motto}"></textarea>
                            </div>
                            <div class="pretty-edit-box">
                                <div class="pretty-edit-box-title">
                                    <div class="pretty-edit-box-name">[[#{profile.city}]]</div>
                                    <div class="pretty-edit-box-tip"><span class="takeTip">0</span>/30</div>
                                </div>
                                <input class="pretty-edit-box-text" id="city" name="city" maxlength="30" th:value="${user.city}">
                            </div>
                            <div class="pretty-edit-box">
                                <div class="pretty-edit-box-title">[[#{profile.birthday}]]
                                    <input class="profile-input-choice birthday" name="birthday" readonly="readonly" th:value="${#dates.format(user.birthday,'yyyy-MM-dd')}">
                                </div>
                            </div>
                            <div class="pretty-edit-box">
                                <div class="pretty-edit-box-title">[[#{profile.open_source}]]
                                    <select class="profile-input-choice" id="opensource" name="opensource">
                                        <option value="N" th:selected="${user.opensource=='N'}"> No</option>
                                        <option value="Y" th:selected="${user.opensource=='Y'}"> Yes</option>
                                    </select>
                                </div>
                            </div>
                            <div class="pretty-edit-box">
                                <div class="pretty-edit-box-title">[[#{profile.default_language}]]
                                <select class="profile-input-choice " id="select_lang" name="language" th:if="${languages==null}">
                                    <option value="1" >MS C++</option>
                                    <option value="2" >MS C</option>
                                    <option value="3" >GNU C++</option>
                                    <option value="4" >GNU C</option>
                                    <option value="5" >Java</option>
                                    <option value="8" >Pascal</option>
                                </select>
                                <select class="profile-input-choice " id="select_lang" name="language" th:if="${languages!=null}">
                                    <option th:each="language,stat : ${languages}"
                                            th:value="${language.id}"
                                            th:text="${language.language_name}"
                                            th:selected="${language.id == user.language}">
                                </select>
                                </div>
                            </div>

                            <div class="pretty-edit-box-password">
                                <div class="pretty-edit-box">
                                    <div class="pretty-edit-box-title">
                                        <div class="pretty-edit-box-name">[[#{profile.oldpwd}]]</div>
                                        <div class="pretty-edit-box-tip"><span class="takeTip">0</span>/30</div>
                                    </div>
                                    <input class="pretty-edit-box-text" id="old_password" name="old_password" maxlength="30" type="password" placeholder="Make it blank if you don't want to change it" value="">
                                </div>
                                <div class="pretty-edit-box">
                                    <div class="pretty-edit-box-title">
                                        <div class="pretty-edit-box-name">[[#{profile.newpwd}]]</div>
                                        <div class="pretty-edit-box-tip"><span class="takeTip">0</span>/30</div>
                                    </div>
                                    <input class="pretty-edit-box-text" id="password" name="password" maxlength="30" type="password" placeholder="Enter new password if you want to change it" value="">
                                </div>
                                <div class="pretty-edit-box">
                                    <div class="pretty-edit-box-title">
                                        <div class="pretty-edit-box-name">[[#{profile.reppwd}]]</div>
                                        <div class="pretty-edit-box-tip"><span class="takeTip">0</span>/30</div>
                                    </div>
                                    <input class="pretty-edit-box-text" id="password2" name="repeat_password" maxlength="30" type="password" placeholder="Enter new password again" value="">
                                </div>
                            </div>
                            <div class="profile-submit-div">
                                <input class="modify-box-submit" id="save" type="Submit" th:value="#{profile.save}"/>
                                <span class="fielderror"></span>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <h4>[[#{third-part-account}]]</h4>
            <h5>[[#{third-part-account-list}]]</h5>
            <div class="roundbox">
                <div >
                    <table class="problem rtable">
                        <tr class="header">
                            <th>[[#{third-part-account-no}]]</th>
                            <th>[[#{third-part-account-provider}]]</th>
                            <th>[[#{third-part-account-username}]]</th>
                            <th>[[#{third-part-account-date}]]</th>
                            <th>[[#{third-part-account-action}]]</th>
                        </tr>
                        <tr th:each="oauth,stat : ${oauthList}" th:class="${stat.odd}?'dark'">
                            <td th:text="${stat.index+1}"></td>
                            <td>
                                <img class="third-party-avatar" th:src="'/img/' + ${oauth.provider} + '.jpeg'"
                                     th:title="${oauth.provider}" th:alt=" #{third-part-account-bind} + ' ' + ${oauth.provider}" th:text="${oauth.provider}">
                            </td>
                            <td>
                                <img class="third-party-avatar" th:src="${oauth.avatar_url}" th:title="${oauth.login}"
                                      th:alt="${oauth.login}" th:text="${oauth.nickname}">
                            </td>
                            <td> <span th:text="${#dates.format(oauth.create_date,'yyyy-MM-dd HH:mm:ss')}"></span></td>
                            <td> <a th:href="@{/unauth/{provider}(provider=${oauth.provider})}" th:text="#{third-part-account-unbind}"></a> </td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="other-oauth">
                <h5 th:if="${bindGitee == 0 || bindGithub == 0}">[[#{third-part-account-pend}]]</h5>
                <a th:if="${bindGitee == 0}" th:href="'https://gitee.com/oauth/authorize?client_id=' + ${giteeClientID} + '&redirect_uri=' + ${giteeRedrectUrl} + '&response_type=code'">
                    <img class="third-party-logo" src="/img/gitee.jpeg" th:title="#{third-part-account-bind} + 'gitee'" th:alt="#{third-part-account-bind}+ 'gitee'">
                </a>
                <a th:if="${bindGithub == 0}" th:href="'https://github.com/login/oauth/authorize?client_id=' + ${githubClientID}">
                    <img class="third-party-logo" src="/img/github.jpeg" th:title="#{third-part-account-bind} + 'github'" th:alt="#{third-part-account-bind}+ 'github'">
                </a>
                <span >
            </div>
        </div>
        <div class="sidebar" th:replace="sidebar::web-sidebar"></div>
    </div>
    <div th:replace="common::web-footer"></div>
</div>
<script type="text/javascript" th:src="@{/js/datepick/datepick.js}"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('input.birthday').datepick({
            dateFormat: 'yy-mm-dd',
            changeMonth: true,
            changeYear: true,
            yearRange: "-100:0",
            showOn: 'both',
            buttonImageOnly: true,
            buttonImage: '/js/datepick/dateIcon.gif'
        });

        var settingFormSubmitListener = function () {
            var email = $(this).find("input[name=email]").val();
            var old_password = $(this).find("input[name=old_password]").val();
            var password = $(this).find("input[name=password]").val();
            var repeat_password = $(this).find("input[name=repeat_password]").val();
            var nickname = $(this).find("input[name=nickname]").val();
            var motto = $(this).find("textarea[name=motto]").val();
            var school = $(this).find("input[name=school]").val();
            var birthday = $(this).find("input[name=birthday]").val();
            var opensource = $('#opensource option:selected').val();
            var language = $('#select_lang option:selected').val();
            var city = $(this).find("input[name=city]").val();
            postUserSetting = function () {
                var formData = { "email": email, "old_password":old_password, "password":password,
                    "repeat_password":repeat_password, "nickname":nickname, "motto":motto, "school":school,
                    "city":city, "birthday":birthday + " 00:00:00", "opensource":opensource,
                    "language":language}
                $.ajax({
                    type : "post",
                    url : "/api/user-setting",
                    data : JSON.stringify(formData),
                    contentType:"application/json",
                    dataType : "json",
                    success : function(data) {
                        if (data.code != 200) {
                            if (data.code == 0) {
                                var errMsg = ""
                                var errList = data.data
                                for(var j in errList){
                                    var eva = errList[j];
                                    for(var key in eva){
                                        errMsg += eva[key] + "<br>"
                                    }
                                }
                                $(".fielderror").html(errMsg);
                            } else {
                                $(".fielderror").html(data.msg);
                            }
                            return;
                        }
                        window.location.href="/profile/" + data.data;
                    }
                });
            };
            postUserSetting();
            return false;
        }

        var init = function () {
            $("#modifyuser").find("form").submit(settingFormSubmitListener);
        }
        init();
    });

</script>
<script type="text/javascript">
$(document).ready(function () {
    OnlineJudge.prettyEditBox();
})
</script>
<!-- Pop div -->
<div class="pop-div-photo"  id="pop-div-photo">
</div>
<div class="pop-inner-div-photo" id="pop-inner-div-photo">
    <div class="box">
        <div class="preview-wrap">
            <div class="title">[[#{profile.prereview}]]</div>
            <div class="preview-img-wrap">
                <img id="imga-preview" th:if="${user.avatar != null}" th:src="${user.avatar}" />
                <img id="imga-preview" th:if="${user.avatar == null}" th:src="@{/img/photo.png}" />
            </div>
        </div>
        <div class="img-wrap">
            <img src="" alt="" id="img-photo" />
        </div>
        <div class="btn-wrap">
            <input type="file" id="file-avatar" style="position:absolute;clip:rect(0,0,0,0)" />
            <label for="file-avatar" class="btn btn-primary" style="margin:0 20px 0 90px; color:black;">[[#{profile.choose}]]</label>
            <button class="btn-avatar-upload">[[#{profile.upload}]]</button>
        </div>
    </div>
</div>
<link rel="stylesheet" th:href="@{/js/cropperjs/dist/cropper.css}">
<script type="text/javascript" th:src="@{/js/cropperjs/dist/cropper.js}"></script>
<script type="text/javascript" th:src="@{/js/messager.js}"></script>
<script type="text/javascript" th:src="@{/js/avatar.js}"></script>
</body>
</html>
